<template>
    <div>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <!-- <button @click="handleChangeValue">{{ muneAvtion }}</button>
        <RecursiveMenu ref="childRef" /> -->
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :collapse="isCollapse" background-color="blue" text-color="white" active-text-color="red">>

            <RecursiveMenu :menuItems="menuItems" :collapse="!isCollapse" />
        </el-menu>
    </div>
</template>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>

<script>
import RecursiveMenu from './RecursiveMenu.vue' // 根据路径调整

export default {
    components: {
        RecursiveMenu
    },

    data() {
        return {
            muneAvtion: '收起',
            isCollapse: false,
            menuItems: [
                { index: '1', label: 'Item 1', type: 'item', icon: 'el-icon-menu' },
                {
                    index: '2', label: 'Item 2', children: [
                        { type: 'item', index: '2-1', label: 'Subitem 1', icon: 'el-icon-menu' },
                        {
                            type: 'submenu', index: '2-2', label: 'Subitem 1', icon: 'el-icon-menu', children: [
                                { type: 'item', index: '2-2-1', label: 'Subitem 1', icon: 'el-icon-menu' },
                                { type: 'item', index: '2-2-2', label: 'Subitem 1', icon: 'el-icon-menu' },
                            ]
                        },
                    ], type: 'submenu', icon: 'el-icon-location'
                },
                { index: '3', label: 'Item 3', type: 'item', icon: 'el-icon-menu' },
                { index: '4', label: 'Item 4', type: 'item', icon: 'el-icon-menu' },
                { index: '5', label: 'Item 5', type: 'item', icon: 'el-icon-menu' }
            ]
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },

    }
}
</script>